import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Toast } from 'react-bootstrap';

import "./less/newversion.css";

class NewVersion extends Component {
  constructor() {
    super();
    this.state = {
      showNewVersion: true
    }
  }

  hideShowNewVersion () {
    this.setState({
      showNewVersion: false
    });
  }

  render () {
    return (
      this.props.newVersion != null && this.state.showNewVersion ?
        <div
          aria-live="polite"
          aria-atomic="true"
          className="newversion"
        >
          <Toast show={this.state.showNewVersion} onClose={this.hideShowNewVersion.bind(this)}>
            <Toast.Header className="text-danger">
              {this.props.newVersion.title}({"V" + this.props.newVersion.versionName})
            </Toast.Header>
            <Toast.Body dangerouslySetInnerHTML={{
              __html:
                this.props.newVersion.content.replace("\n", "<br />") +
                "<p class=\"footer\"><a href=\"" + this.props.newVersion.downloadUrl + "\" target=\"_blank\">点击以下链接下载新版客户端工具</a></p>"
            }}></Toast.Body>

          </Toast>
        </div>
        : null
    )
  }
}

function mapStateToProps (state) {
  return {
    newVersion: state.deploy.newVersion
  }
}

export default connect(mapStateToProps)(NewVersion);